CSS

1 HTML 基础及其实战

1.1 HTML标签和标签属性

1.2 元素和元素分类

1.2.1 元素

Alt text

1.2.2 行内元素 & 块级元素

块级元素

Alt text
行内元素

Alt text
元素之间的转换

Alt text

Alt text

Alt text

1.3 标签语义化

logo标签使用h1标签(h1的权重最大)

1.3.1 标签语义化的好处

Alt text

1.3.2 标签语义化的法则

Alt text

1.3.3 标签语义化的含义

Alt text

1.46 网页的基本结构

1.<!-- html5 的 文档声明 -->
2.<!DOCTYPE html>
3.<!-- 根元素lang语言 en英语 ch中文 -->
4.<html lang="en">
5.<!-- 网页的头部 -->
6.<head>
7. <!--
8. mate元信息
9. 编码 UTF-8
10. 网页的关关键字 SEO优化
11. 网页的描述内容
12. 视口 viewport meta: vb tab(移动端手机页面开发必须加的code)
13. -->
14. <meta charset="UTF-8">
15. <!-- 网页的标题 -->
16. <title>01-网页的基本结构</title>
17. <!-- 标题前的小图标 -->
18. <link rel="shortcut icon" type="text/css" href="https://avatars1.githubusercontent.com/u/31435638?s=460&v=4">
19.</head>
20.<!-- 网页的主体 -->
21.<body>
22.
23.</body>
24.</html>

2 CSS 基础及其实战

css简介

CSS (层叠样式表) 编辑
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

Alt text

基础语法

Alt text
命名规范

Alt text

Alt text

Alt text

2.1 CSS的引入方式

2.1.1 CSS的引入方式——行内式

1.<div style="width:250px;height:250px"></div>

2.1.2 CSS的引入方式——内嵌式

1.<style>
2. p{
3. width:250px;
4. height:250px;
5. }
6.</style>

2.1.3 CSS的引入方式——外链式

Alt text

2.1.4 CSS的引入方式——导入式

Alt text

2.1.5 link和import的区别

Alt text

Alt text

Alt text

2.2 CSS选择器

Alt text

2.2.1 基本选择器

Alt text

2.2.2 并集选择器 “,”

Alt text

2.2.3 交集选择器 “c1 c2”

Alt text

Alt text

2.2.4 后代选择器 ” 空格”

Alt text

2.2.5 子代选择器“>”

Alt text

Alt text

2.2.6 相邻兄弟选择器 “+”以及所有兄弟选择器 “~”

Alt text

Alt text

2.2.7 属性选择器 [属性名]

Alt text

Alt text

2.2.8 伪类选择器

Alt text

Alt text

Alt text

2.2.9 css3新增的伪类选择器

2.2.9.1 :not

Alt text

2.2.9.2 :last-child
2.2.9.3 :nth-child(number)
2.2.9.4 :only-child 只有一个子元素的元素
2.2.9.5 :nth-last-child(n) 倒数第几个元素
2.2.9.6 :first-of-type 同级别的第一个元素
2.2.9.7 :last-of-type 同级别的最后一个元素
2.2.9.8 :only-of-type 只有一个兄弟(独苗)的元素
2.2.9.9 :nth-of-type(n) 第n个同级兄弟元素
2.2.9.10 :nth-last-of-type(n) 倒数第n个同级兄弟元素
2.2.9.11 :empty 空内容的元素
2.2.9.12 :checked 被选中 主要用在input的表单元素

2.2.10 伪元素选择器

Alt text

2.2.10 .1 :first-line 第一行起作用

2.2.10 .2 :first-letter 第一个文字内容

2.2.10 .3 :before 在元素之前添加

2.2.10 .4 :after 在元素之后添加

Alt text

Alt text

Alt text

Alt text

2.3 权重

Alt text

Alt text

Alt text

Alt text

2.4 CSS的属性继承

2.5 background属性的使用技巧

2.6 雪碧图的使用技巧

2.7 常见的兼容性处理

3 实战

3.1 css盒模型

3.1.1 传统css盒子模型

Alt text

3.1.2 CSS3新增的盒子模型

box-sizing:border-box;

width = 内容宽+padding+border
height = 内容高+padding+border

3.2 伪类

3.2.1 :before:after

1.<body>
2. <div id="box">
3. <p id="box_p">等我嗨死...来。</p>
4. </div>
5.</body>
6.<script>
7. let box_p = document.getElementById("box_p");
8. //在页面中我们添加的 伪类 p:after和p:before是看不到html结构的,
9. //通过window.getComputedStyle(targetElement,'伪劣名').属性名 可以获取到伪类的css属性的值
10.
11.console.log(window.getComputedStyle(box_p,"after").content);//"#box p:after"
12. console.log(window.getComputedStyle(box_p,"before").content);//"#box p:before"
13.</script>

Alt text